<template>
  <div class="dashboard-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- 查询日期 StartDate 和EndDate -->
        <el-form-item>
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="请选择月份"
            :disabled-date="disabledDate"
            style="width: 183px"
          />
        </el-form-item>
        <el-form-item v-if="currentSystem == 'admin'">
          <LabelSelectCpm
            :load-data="getProjectMagList"
            :label-key="['name', 'projectId']"
            @select-callback="selectCallback"
          ></LabelSelectCpm>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryParams.selectedGroupIds" placeholder="请选择班组" collapse-tags multiple clearable>
            <el-option v-for="item in teamList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"> 搜索 </el-button>
          <el-button type="primary" :loading="download_loading" @click="handleExport"> 导出 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 
        核心数据展示 -->
    <el-row :gutter="20" style="padding: 15px 0 0 0">
      <el-col :span="6" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <el-row :gutter="20" style="height: 200px" align="middle">
            <el-col :span="12" :offset="0" align="center">
              <img src="@/assets/checkin/1.png" style="width: 100px; height: 100px" />
            </el-col>
            <el-col :span="12" :offset="0" align="center">
              <div style="color: #3b98f7; font-size: 20px; font-weight: bold">
                {{ checkinCount.projectPersonCount }}
              </div>
              <div style="color: #101010; font-size: 16px; font-weight: bold">项目人员总数</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <el-row :gutter="20" style="height: 200px" align="middle">
            <el-col :span="12" :offset="0" align="center">
              <img src="@/assets/checkin/2.png" style="width: 100px; height: 100px" />
            </el-col>
            <el-col :span="12" :offset="0" align="center">
              <div style="color: #3b98f7; font-size: 20px; font-weight: bold">
                {{ checkinCount.checkinPersonCoun }}
              </div>
              <div style="color: #101010; font-size: 16px; font-weight: bold">出勤人员总数</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <el-row :gutter="20" style="height: 200px" align="middle">
            <el-col :span="12" :offset="0" align="center">
              <img src="@/assets/checkin/3.png" style="width: 100px; height: 100px" />
            </el-col>
            <el-col :span="12" :offset="0" align="center">
              <div style="color: #3b98f7; font-size: 20px; font-weight: bold">
                {{ checkinCount.absenceFromDutyPersonCount }}
              </div>
              <div style="color: #101010; font-size: 16px; font-weight: bold">缺勤人员总数</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <el-row :gutter="20" style="height: 200px" align="middle">
            <el-col :span="12" :offset="0" align="center">
              <img src="@/assets/checkin/4.png" style="width: 100px; height: 100px" />
            </el-col>
            <el-col :span="12" :offset="0" align="center">
              <div style="color: #3b98f7; font-size: 20px; font-weight: bold">
                {{ checkinCount.groupCount }}
              </div>
              <div style="color: #101010; font-size: 16px; font-weight: bold">班组数</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top: 25px">
      <el-col :span="8" :offset="0">
        <AttendanceChart :attendance="checkinCount.attendance" :absence="checkinCount.absenceRate"></AttendanceChart>
      </el-col>
      <el-col :span="8" :offset="0">
        <AttendanceAnalysis
          :group-names="groupCheckinAnalysis.groupNames"
          :checkin-person-count="groupCheckinAnalysis.checkinPersonCount"
          :absence-from-duty-person-count="groupCheckinAnalysis.absenceFromDutyPersonCount"
          :on-duty-rate="groupCheckinAnalysis.onDutyRate"
        ></AttendanceAnalysis>
      </el-col>
      <el-col :span="8" :offset="0">
        <AttendanceStatistics
          :group-names="groupCheckinAnalysis.groupNames"
          :absence-from-duty-rate="groupCheckinAnalysis.absenceFromDutyRate"
        ></AttendanceStatistics>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
/**组件 */
import { downloadFile } from "@/utils";
import AttendanceChart from "./components/AttendanceChart.vue";
import AttendanceAnalysis from "./components/AttendanceAnalysis.vue";
import AttendanceStatistics from "./components/AttendanceStatistics.vue";
import LabelSelectCpm from "./components/LabelSelectCpm.vue";
import {
  getProjectTeamPulldownList,
  getProjectMagList,
  exportDetail,
  getProjectGroupCheckinAnalysis,
  getProjectCheckinCount,
} from "@/api/checkin/index";
import { ProjectCheckinCountQuery, ProjectCheckinCount, ProjectGroupCheckinAnalysis } from "@/api/checkin/types";
import moment from "moment";

/**数据 */
const currentSystem = ref(localStorage.getItem("usertypeName"));
const queryParams = reactive<ProjectCheckinCountQuery>({
  month: moment().format("yyyy-MM"),
  selectedGroupIds: [],
});
const teamList = ref();
const download_loading = ref(false);

const checkinCount = reactive<ProjectCheckinCount>({
  projectPersonCount: 0,
  checkinPersonCoun: 0,
  absenceFromDutyPersonCount: 0,
  groupCount: 0,
  attendance: 0,
  absenceRate: 0,
});
const groupCheckinAnalysis = reactive<ProjectGroupCheckinAnalysis>({
  groupNames: [],
  checkinPersonCount: [],
  absenceFromDutyPersonCount: [],
  onDutyRate: [],
  absenceFromDutyRate: [],
});

/**
 * 日期选择
 */
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

/**
 * 选择项目回调
 */
function selectCallback(data: any) {
  queryParams.projectId = data;
  handleProjectTeam(data);
}

/**
 * 项目班组下拉
 */
function handleProjectTeam(projectId?: number) {
  if (currentSystem.value !== "admin") {
    getProjectTeamPulldownList().then((res) => {
      if (res.type === 0) {
        if (res.success) {
          teamList.value = res.data;
        } else {
        }
      } else {
      }
    });
  } else {
    getProjectTeamPulldownList(projectId).then((res) => {
      if (res.type === 0) {
        if (res.success) {
          teamList.value = res.data;
        } else {
        }
      } else {
      }
    });
  }
}
/**
 * 查询
 */
function handleQuery() {
  if (queryParams.month) {
    queryParams.month = moment(queryParams.month).format("YYYYMM");
  }
  if (queryParams.selectedGroupIds && queryParams.selectedGroupIds?.length > 0) {
    queryParams.groupIds = queryParams.selectedGroupIds?.join(",");
  } else {
    queryParams.groupIds = "";
  }
  getProjectCheckinCount(queryParams).then((res) => {
    if (res.type === 0) {
      if (res.success) {
        checkinCount.projectPersonCount = res.data.projectPersonCount;
        checkinCount.checkinPersonCoun = res.data.checkinPersonCount;
        checkinCount.absenceFromDutyPersonCount = res.data.absenceFromDutyPersonCount;
        checkinCount.groupCount = res.data.groupCount;
        checkinCount.attendance = res.data.attendance;
        checkinCount.absenceRate = res.data.absenceRate;
      } else {
      }
    } else {
    }
  });
  getProjectGroupCheckinAnalysis(queryParams).then((res) => {
    if (res.type === 0) {
      if (res.success) {
        groupCheckinAnalysis.groupNames = res.data.groupNames;
        groupCheckinAnalysis.checkinPersonCount = res.data.checkinPersonCount;
        groupCheckinAnalysis.absenceFromDutyPersonCount = res.data.absenceFromDutyPersonCount;
        groupCheckinAnalysis.onDutyRate = res.data.onDutyRate;
        groupCheckinAnalysis.absenceFromDutyRate = res.data.absenceFromDutyRate;
      } else {
      }
    } else {
    }
  });
}
/**
 * 导出
 */
function handleExport() {
  download_loading.value = true;
  exportDetail(queryParams).then((res) => {
    downloadFile(res);
    download_loading.value = false;
  });
}

onMounted(() => {
  console.log("父页面初始化");
  handleProjectTeam();
  handleQuery();
});
</script>

<style scoped>
.dashboard-container {
  position: relative;
  padding: 0 20px 0 20px;
  font-family: SourceHanSansCN;
}
.el-input {
  width: 120px;
}

:deep().el-form-item {
  margin-right: 15px;
}
</style>
